import React, { useState, useEffect, useRef } from 'react'
import HomeHead from '../components/HomeHead'
import _ from "../assets/utils"
import { Swiper, Image, Divider, DotLoading } from 'antd-mobile'
import { Link } from 'react-router-dom';
import "./Home.less"
import { newsLatest, queryNewsBefore } from "../api"
import NewsItem from "../components/NewsItem"
import SkeletonAgain from "../components/SkeletonAgain"

export default function Home() {
    let [today, setToday] = useState(_.formatTime(null, "{0}{1}{2}"));
    let [bannerList, setBannerList] = useState([])
    let [newsList, setNewsList] = useState([]);
    const timeRef = useRef(null);
    const loadRef = useRef();
    let xxx;
    // console.log(loadRef.current)
    useEffect(() => {
        (async () => {
            let { date, stories, top_stories } = await newsLatest();
            // console.log(stories)
            setToday(date);
            setBannerList(top_stories);
            setNewsList([{ date, stories }]);
        })()
    }, []);

    useEffect(() => {
        if (newsList.length > 0) {
            // timeRef.current = newsList[newsList.length - 1]["date"];
            xxx = newsList[newsList.length - 1]["date"];
        }
    }, [newsList]);

    useEffect(() => {
        let observer = new IntersectionObserver(async (entries) => {
            if (entries[0].isIntersecting) {
                let res = await queryNewsBefore(xxx);
                setNewsList((preNews) => [...preNews, res]);
                try {
                    // console.log("resdddddd");
                    // let time = newsList[newsList.length - 1]['date'];
                    // let res = await queryNewsBefore(time);
                    // newsList.push(res);

                } catch (_) { }
            }
        })
        observer.observe(loadRef.current);
        let load = loadRef.current;
        return () => {
            observer.unobserve(load);
        }
    }, [])

    return (
        <div className='home-box'>
            <HomeHead today={today} />

            <div className="swiper-box">
                {bannerList.length > 0 ? <Swiper loop autoplay>
                    {bannerList.map((item) => {
                        return (
                            <Swiper.Item key={item.id}>
                                <Link to={`/detail/${item.id}`}>
                                    <Image src={item.image} lazy />
                                    <div className="desc">
                                        <h3 className="title">{item.title}</h3>
                                        <p className="author">{item.hint}</p>
                                    </div>
                                </Link>
                            </Swiper.Item>
                        )
                    })}
                </Swiper> : null}
            </div>

            {newsList.length > 0 ?
                newsList.map((item, index) => {
                    return <div className="news-box" key={item.date}>
                        {index == 0 ? null : <Divider contentPosition='left'>{_.formatTime(item.date, "{1}月{2}日")}</Divider>}
                        <div className="list">
                            {item.stories.map((news) => {
                                return <NewsItem key={news.id} news={news} />
                            })}
                        </div>
                    </div>
                })
                : <SkeletonAgain />}


            <div className="loadmore-box" ref={loadRef} style={{ display: newsList.length > 0 ? "block" : "none" }}>
                <DotLoading />数据加载中
            </div>
        </div>
    )
}
